<script setup lang="ts">
import modalSuccessIcon from '@/static/images/modal/success.png'

const router = useRouter()
const isShowSuccessModal = ref(false)

const toggleSuccessModal = useThrottleFn(() => {
  isShowSuccessModal.value = !isShowSuccessModal.value
}, 1000)

function handleSubmitSuccess() {
  toggleSuccessModal()
}

function handleExit() {
  toggleSuccessModal()
  router.back()
}
</script>

<template>
  <Spacer height="40" />
  <view class="flex items-center">
    <image class="w-52rpx h-43rpx" src="@/static/images/get-price-header-tip.png" />
    <Spacer width="12" />
    <view class="text-28rpx leading-28rpx text-#333333">
      请填写如下表单，获取装修报价
    </view>
  </view>
  <Spacer height="30" />
  <view class="p-30rpx bg-white rounded-20rpx">
    <UserSubmitForm @success="handleSubmitSuccess" />
    <Spacer height="50" />
    <!-- 底部提示 -->
    <view class="text-24rpx leading-24rpx text-tertiary text-center">
      <text class="text-#FF1313">
        *
      </text>
      将有工作人员与您联系，提供专属服务
    </view>
  </view>
  <uv-overlay :show="isShowSuccessModal" @tap="handleExit">
    <uv-transition mode="zoom-in" :show="isShowSuccessModal">
      <view class="relative w-screen h-screen">
        <JZTModal
          v-if="isShowSuccessModal"
          :icon="modalSuccessIcon"
          title="表单提交成功"
          content="恭喜信息提交成功，请耐心等待专属顾问与您联系～"
          @confirm="handleExit"
        />
      </view>
    </uv-transition>
  </uv-overlay>
</template>

<route lang="yaml">
name: 'getPrice'
style:
  navigationBarTitleText: '获取报价'
</route>
